<template>
    <div class="module-card">
        <div class="module-header">
            <h2 class="module-title">角色与权限</h2>
            <button class="text-primary text-sm hover:underline" @click="manageRoles">管理角色</button>
        </div>
        <div class="p-4">
            <div class="mb-4">
                <div class="text-sm text-gray-500 mb-2">当前登录角色</div>
                <div class="flex items-center">
                    <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium">{{ currentRole }}</span>
                    <button class="ml-2 text-xs text-primary hover:underline" @click="switchRole">切换角色</button>
                </div>
            </div>

            <div>
                <div class="text-sm text-gray-500 mb-3">角色权限分布</div>
                <div class="space-y-3">
                    <div v-for="(role, index) in rolePermissions" :key="index">
                        <div class="flex justify-between items-center mb-1">
                            <span class="text-sm font-medium">{{ role.name }}</span>
                            <span class="text-xs text-gray-500">{{ role.userCount }} 位用户</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="h-2 rounded-full" :class="role.colorClass"
                                :style="{ width: role.permissionPercentage + '%' }"></div>
                        </div>
                        <div class="flex justify-end mt-1">
                            <button class="text-xs text-primary hover:underline"
                                @click="viewRolePermissions(role.id)">查看权限</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4 pt-4 border-t border-gray-100">
                <div class="flex justify-between items-center">
                    <div class="text-sm font-medium">权限申请</div>
                    <button class="text-xs text-primary hover:underline" @click="applyPermission">申请新权限</button>
                </div>
                <div class="mt-2">
                    <div class="text-xs text-gray-500" v-if="pendingPermissions.length === 0">
                        暂无待审批的权限申请
                    </div>
                    <div class="text-xs text-gray-600" v-for="(perm, index) in pendingPermissions" :key="index">
                        • {{ perm }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PermissionRoleManager',
    data() {
        return {
            currentRole: '系统管理员',
            rolePermissions: [
                {
                    id: 1,
                    name: '系统管理员',
                    userCount: 3,
                    permissionPercentage: 100,
                    colorClass: 'bg-primary'
                },
                {
                    id: 2,
                    name: '运营专员',
                    userCount: 12,
                    permissionPercentage: 75,
                    colorClass: 'bg-success'
                },
                {
                    id: 3,
                    name: '普通用户',
                    userCount: 89,
                    permissionPercentage: 40,
                    colorClass: 'bg-info'
                },
                {
                    id: 4,
                    name: '访客',
                    userCount: 25,
                    permissionPercentage: 15,
                    colorClass: 'bg-gray-400'
                }
            ],
            pendingPermissions: [
                "数据导出权限 - 李华",
                "用户管理权限 - 王芳"
            ]
        };
    },
    methods: {
        manageRoles() {
            // 管理角色逻辑
            this.$emit('manage-roles');
        },
        switchRole() {
            // 切换角色逻辑
            this.$emit('switch-role');
        },
        viewRolePermissions(roleId) {
            // 查看角色权限逻辑
            this.$emit('view-role-permissions', roleId);
        },
        applyPermission() {
            // 申请权限逻辑
            this.$emit('apply-permission');
        }
    }
}
</script>